<template>
  <div>
    <el-upload
      action="/file"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :data="params"
      :file-list="fileList"
      :multiple="multiple"
      :accept="accept"
      :list-type="listType">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "multiFile",
    data() {
      return {
        fileIds: [],
        params: {},
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: []
      };
    },
    methods: {
      /**
       * 文件删除事件
       * @param file
       * @param fileList
       */
      handleRemove(file, fileList) {
        this.$confirm('确定删除这个文件吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          /*--------------------文件删除请求开始---------------------*/
          this.$http.post('file/delFile/'+ file.guid).then((res) => {
            if(res > 0){
              this.$notify.success('文件删除成功！');

              const fileIds = this.fileIds;
              fileIds.splice(fileIds, 1);
              this.emitInput()
            }else{
              this.$notify.error('文件删除失败')
              fileList.push(file)
            }
          }).catch(() => {
            fileList.push(file)
          })
          /*--------------------文件删除请求结束---------------------*/

        }).catch(() => {
          //弹窗取消时，把要删除的文件放回去。ps:因组件没有删除文件的回调事
          fileList.push(file)
        })

      },
      /**
       * 图片显示事件
       * @param file
       */
      handlePreview(file) {
        if(file.guid && (file.type === '0' || (file.raw && file.raw.type.indexOf('image') > -1))) {
          this.dialogImageUrl = '/file/getFile/'+ file.guid;
          this.dialogVisible = true;
        }else {
          window.location.href ='/file/download/'+ file.guid
        }
      },
      /**
       * 文件上传成功后返回事件
       * @param res
       * @param file
       * @param fileList
       */
      handleSuccess(res, file, fileList){
        if(res.status === '0'){
          const guid = res.data
          file.guid = guid
          this.fileIds.push(guid)
          this.$notify.success('文件：'+ file.name +'上传成功！')
          this.emitInput()
        }else{
          this.$notify.error('文件：'+ file.name +'上传失败')
        }
      },
      /**
       * 修改父组件value值
       */
      emitInput() {
        this.$emit('input', this.fileIds.join())
      },
      /**
       * 通过 entity 和entityId获取文件信息list
       */
      loadFileInfo() {
        if(!this.entity || !this.entityId){
          return false
        }
        this.$http.get('file/getFileListByEntityId', {
          params: {
            entity: this.entity,
            entityId: this.entityId
          }
        }).then((res) => {
          if(res){
            res.forEach(item => {

              this.fileList.push({
                'guid': item.guid,
                'name': item.fNameOld,
                'url': '/file/getFile/' + item.guid,
                'type': item.fType
              })
              this.fileIds.push(item.guid)
            })
          }
        })
      }
    },
    watch: {
      /**
       * 观查 entityId
       * @param val
       */
      entityId(val) {
        this.fileList=[]
        this.fileIds=[]
        if(val){
          if(this.entity){
            this.loadFileInfo()
          }
        }else {
          this.emitInput()
        }
      }
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      model: {
        type: String,
        default: ''
      },
      entity: {
        type: String,
        default: ''
      },
      entityId: {
        type: String,
        default: ''
      },
      listType: {
        type: String,
        default: 'text'
      },
      multiple: {
        type: Boolean,
        default: true
      },
      accept: {
        type: String,
        default: 'image/*'
      },
      placeholder: {
        type: String,
        default: ''
      }
    },
    created() {
      if(this.value) {
        this.fileIds = this.value.split(',')
      }
      this.params = {
        'upEntity': this.entity,
        'upEntityId': this.entityId,
        'upModel': this.model
      }
      this.loadFileInfo()
    }
  }
</script>
